import { AppDispatch, AppThunk, RootState } from '@/store'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
/**
 * 全局可复用钩子函数
 * == 函数封装的基本思想：==
1. 将相同的逻辑直接拷贝到函数中
2. 不同的数据或逻辑通过函数参数传入
3. 需要返回数据，就通过函数返回值返回
 */
/**
 * 作用：
 * 1. 分发异步action
 * 2. 获取分发后存储到redux数据
 * 使用：
 * const data = useInitState(异步action, redux模块名)
 * @param asyncAction 异步action
 * @param stateName redux模块名
 * @returns 
 */
export function useInitState<StateName extends keyof RootState>(asyncAction: () => AppThunk, stateName: StateName) {
  const dispatch = useDispatch<AppDispatch>()
  // 1. 分发异步action
  useEffect(() => {
    dispatch(asyncAction())
  }, [dispatch, asyncAction])
  // 2. 获取异步action存储到redux某个模块数据
  const data = useSelector((state: RootState) => state[stateName])
  // 3. 对外暴露获取的数据
  return data
}
/**
 * 页面代码块高亮
 */
export function useHlCode() {
  useEffect(() => {
    hljs.configure({
      // 忽律html特殊字符的警告
      ignoreUnescapedHTML: true,
    })
    // 获取网页中所有代码块元素，循环对所有代码块执行高亮
    document.querySelectorAll<HTMLElement>('pre code').forEach((el) => {
      // 说明❓：添加类名后，需要配合hljs自带样式，才能高亮
      hljs.highlightElement(el)
    })
  }, [])
}